<template>
  <div class="learning-container">
    <van-field
      v-model="selectValue"
      is-link
      readonly
      label="课程"
      placeholder="请选择课程"
      @click="show = true"
    />
    <van-popup v-model="show" round position="buttom">
      <van-cascader
        title="请选择课程"
        :options="table"
        @close="show = false"
        @finish="onFinish"
      ></van-cascader>
    </van-popup>
    <!-- 搜索框 -->
    <van-search
      v-model="searchValue"
      placeholder="请输入搜索关键词"
      shape="round"
      background="#ffffff"
    />

    <!-- 八宫格改为每行4个 -->
    <van-grid :column-num="4" :border="true" :gutter="8">
      <van-grid-item
        v-for="(item, index) in gridItems"
        :key="index"
        @click="handleClick(item.path)"
      >
        <template #icon>
          <img
            style="height: 60px; width: 60px"
            :src="item.icon"
            class="grid-icon"
          />
        </template>
        <template #text>
          <span class="grid-text">{{ item.text }}</span>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { getToken } from "@/utils/auth"; // get token from cookie
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import shouyeIcon from "@/assets/shouye.jpg";
import shunxuIcon from "@/assets/shunxu.jpg";
import suijiIcon from "@/assets/suiji.jpg";
import cuowuIcon from "@/assets/cuowu.jpg";
import shoucangIcon from "@/assets/shoucang.jpg";
import ceshiIcon from "@/assets/ceshi.jpg";
import huiguIcon from "@/assets/huigu.jpg";
import listenIcon from "@/assets/listen.jpg";
import subjectApi from "@/api/subject/index";
import lastRecord from "@/api/record/lastRecord";
import selfTestResult from "@/api/selfTest/selfTestResult";
import selfTest from "@/api/selfTest";
import { Dialog } from "vant";
import { Notify } from "vant";

const router = useRouter();
const searchValue = ref("");
const show = ref(false);
const selectValue = ref("");
const table = ref([]);

const getSubject = async () => {
  const res = await subjectApi.getTree();
  table.value = res.data;
};

onMounted(async () => {
  if (getToken()) {
    await getSubject();
  }
});

// 八宫格数据
const gridItems = [
  {
    text: "预览题目",
    icon: shouyeIcon, // 待添加图片路径
    path: "/learning/preview",
  },
  {
    text: "顺序练习",
    icon: shunxuIcon, // 待添加图片路径
    path: "/learning/sequence",
  },
  {
    text: "随机练习",
    icon: suijiIcon, // 待添加图片路径
    path: "/learning/random",
  },
  {
    text: "错题练习",
    icon: cuowuIcon, // 待添加图片路径
    path: "/learning/wrong",
  },
  {
    text: "收藏练习",
    icon: shoucangIcon, // 待添加图片路径
    path: "/learning/favorite",
  },
  {
    text: "自我测试",
    icon: ceshiIcon, // 待添加图片路径
    path: "/learning/self-test",
  },
  {
    text: "回顾试卷",
    icon: huiguIcon, // 待添加图片路径
    path: "/learning/review",
  },
  {
    text: "英语听力",
    icon: listenIcon, // 待添加图片路径
    path: "/learning/listening",
  },
];

const onFinish = (value) => {
  console.log(value);
};

// 点击处理函数
const handleClick = (path) => {
  router.push(path);
};
</script>

<style scoped>
.learning-container {
  padding: 12px; /* 减小边距 */
  background-color: #f7f8fa;
  min-height: 100vh;
}

.grid-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}

.grid-text {
  font-size: 12px; /* 减小文字大小 */
  color: #323233;
}

:deep(.van-grid-item__content) {
  padding: 8px 4px; /* 减小内边距 */
}

:deep(.van-search) {
  margin-bottom: 12px;
}
</style>
